<template>
    <div class="container">
      <ayjTable
        :columns="columns"
        :data="tableData"
        :hasMore="hasMore"
        :loading="loading"
        :height="dynamicsHeight"
        @load-more="loadMoreData"
      >
        <!-- 自定义性别列 -->
        <!-- <template #column-sex="{ row }">
          <span :style="{ color: row.sex === 'Man' ? 'blue' : 'pink' }">
            {{ row.sex }}
          <el-icon v-if="row.sex === 'Man'"><Male /></el-icon>
            <el-icon v-else><Female /></el-icon>
          </span>
        </template> -->
      </ayjTable>
    </div>
  </template>
  
  <script setup>
  import { ref, defineProps ,watch,computed} from '@vue/composition-api'
  const props = defineProps({
    dynamicHeight: {
        type: Number,
        default: 400
    }
  })

  const dynamicsHeight = computed(() => {
    return props.dynamicHeight
  })

  const columns = ref([
    { 
      title: '序号', 
      prop: 'id', 
      width: '50px', 
      align: 'center',
      render: (row, column, index) => index + 1,
      fixed: 'left'
    },
    { title: '姓名', prop: 'name',width:'20%'},
    { title: '性别', prop: 'sex',width:'30%'},
    { title: '年龄', prop: 'age',width:'20%'},
    // { title: '操作', prop: 'action', width: '100px', slot: true,fixed: 'right' }

  ])
  
  const tableData = ref([
    { id: 165656, name: 'Test1', sex: 'Man', age: 28 },
    { id: 2, name: 'Test2Test2Test2Test2Test2', sex: 'Women', age: 22000000 },
    { id: 1, name: 'Test1', sex: 'ManManManManManManManManManManMan', age: 28 },
    { id: 2, name: 'Test2', sex: 'Women', age: 22 },
  ])
  
  const loading = ref(false)
  const hasMore = ref(true)
  
  const loadMoreData = () => {
    console.log('loadMoreData----')
    if (loading.value || !hasMore.value) return
    
    loading.value = true
    // 模拟异步加载
    setTimeout(() => {
      const newData = []
      const startId = tableData.value.length + 1
      for (let i = 0; i < 20; i++) {
        newData.push({
          id: startId + i,
          name: `Test${startId + i}`,
          sex: Math.random() > 0.5 ? 'Man' : 'Women',
          age: Math.floor(Math.random() * 30) + 20
        })
      }
      tableData.value = [...tableData.value, ...newData]
      
      // 模拟没有更多数据
      if (tableData.value.length >= 150) {
        hasMore.value = false
      }
      
      loading.value = false
    }, 1000)
  }
  
  const handleEdit = (row) => {
    console.log('编辑行:', row)
  }
  
  const handleDelete = (index) => {
    tableData.value.splice(index, 1)
  }
  </script>
  
  <style scoped lang="scss"></style>